<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header::common_header(~{::title},~{::link},~{})">
    <title>实时数据</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
</head>
<body>
<div th:replace="common/bar::topbar" style="height: 100%"></div>
<div class="container-fluid">
    <div class="row">
        <!--左边导航栏-->
        <div th:replace="common/bar::#sidebar"></div>
        <!--//中间表格栏-->
        <div>
            <table class="table table-hover" style="margin: 30px">
                <thead class="thead-light">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">开门时间</th>
                    <th scope="col">开门用户</th>
                </tr>
                </thead>
                <tbody id="t_body">
                </tbody>
            </table>

            <div class="page">
                <button id="firstPage">首页</button>&#160;&#160;&#160;
                <button id="previous">上一页</button>&#160;&#160;&#160;
                第<input type="text" id="index" value="1" size="1">页&#160;&#160;&#160;
                <button id="next">下一页</button>&#160;&#160;&#160;
                <button id="last">尾页</button>
                <div id="pageCount" style="display: inline-block"></div>
            </div>

        </div>



    </div>
</div>
</body>
</html>

<script type="text/javascript">
    var pageSize = "5";//每页行数
    var pageIndex = "1";//当前页
    var totalPageCount = "0";//总页数
    var totalCount = "0";//总记录数
    var OriUrl = 'findAllCardLog'
    //jquery代码随着document加载完毕而加载
    $(document).ready(function () {
        //分页查询
        window.onload = queryForPages();

        function queryForPages() {
            $.ajax({
                url: '/data/keyCard/api/' + OriUrl,
                type: 'get',
                dataType: 'json',
                data: "pageNo=" + pageIndex + "&pageSize=" + pageSize,
                success: function callbackFun(data) {
                    //清空数据
                    clearDate();
                    //查询数据
                    fillTable(data);
                }
            });
        }

        //填充数据
        function fillTable(Jdata) {
            var list = ""
            var trs = "";//不初始化字符串"",会默认"undefined"
            var datas = Jdata.data
            var totalPageCount = Jdata.pages
            var totalCount = 1+pageSize*(pageIndex-1);
                // pageSize=list.size,
                pageIndex = Jdata.pageNum,
                totalCount = datas.total;
            for (var i = 0; i < datas.size; i++) {
                var acceptTime=new Date(datas.list[i]['acceptTime']).toLocaleDateString().replace(/\//g, "-") + " " + new Date(datas.list[i]['acceptTime']).toTimeString().substr(0, 8);
                var tr = '<tr >' +
                    '<th scope="row">'+totalCount+'</th>' +
                    '<td >' + acceptTime + '</td>' +
                    '<td >' + datas.list[i]['cardDesc'] + '</td>' +
                    '</tr>';
                trs += tr;
                totalCount++;
            }
            $("#t_body").append(trs);

        }

        //清空数据
        function clearDate() {
            $("#t_body").html("");
        }

        //首页
        $("#firstPage").click(function () {
            //var index=$("#index").val();
            pageIndex = "1";
            $("#index").val(pageIndex);
            queryForPages();
        });
        //上一页
        $("#previous").click(function () {
            if (pageIndex > 1) {
                pageIndex--;
            }
            $("#index").val(pageIndex);
            queryForPages();
        });  //下一页
        $("#next").click(function () {
            if (pageIndex < totalPageCount) {
                pageIndex++;
            }
            $("#index").val(pageIndex);
            queryForPages();
        });
        //尾页
        $("#last").click(function () {
            pageIndex = totalPageCount;
            $("#index").val(pageIndex);
            queryForPages();
        });
    });
</script>
